/**
 * 头部组件
 */
Vue.component("dp-header", {
    props: {
        // 标题
        title: {
            type: String,
            default: "逊克县农业农村大数据平台"
        }
    },
    template: `
        <div class="page-head-box">
            <div class="page-head-title">
                <span>{{title}}</span>
            </div>
            <div class="page-head-left">
                <p>
                    <span>{{headDate[0]}}</span>
                    <span>星期二</span>
                </p>
                <span>{{headDate[2]}}</span>
            </div>
            <div class="page-head-right">
                <div v-for="(item,index) in rightMenuList" :key="index + 'menu'">
                    <el-dropdown trigger="click" v-if="item.dropdown" @command="handleCommand">
                        <img :src="item.icon" alt=""></img>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit" icon="el-icon-edit">修改密码</el-dropdown-item>
                            <el-dropdown-item command="logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <img v-else :src="item.icon" alt="" @click="item.fun">
                </div>
            </div>
            <!-- 移动端弹窗 -->
            <el-dialog title="手机" custom-class="mobile-dialog" :visible.sync="mobileVisible">
                <div class="mobile-dialog-content" v-if="mobileVisible">
                    <div class="mobile-dialog-box">
                        <div class="dialog-mobile-loading">
                            加载中···
                        </div>
                        <iframe src="https://test.agrionline.cn/local_basic_hsfpl_app/#/pages/planting-subject/planting-subject" frameborder="0"></iframe>
                    </div>
                    <img @click="mobileVisible = false" src="./img/dialog/bbck2.png" alt="">
                </div>
            </el-dialog>
            <!-- ppt 弹框 -->
            <el-dialog title="ppt" custom-class="mobile-dialog" :visible.sync="pptVisible">
                <div class="ppt-dialog-content">
                    <img @click="pptVisible = false" src="./img/dialog/bbck.png" alt="">
                    <div class="ppt-dialog-swiper">
                        <div class="swiper mySwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">Slide 1</div>
                                <div class="swiper-slide">Slide 2</div>
                                <div class="swiper-slide">Slide 3</div>
                                <div class="swiper-slide">Slide 4</div>
                                <div class="swiper-slide">Slide 5</div>
                                <div class="swiper-slide">Slide 6</div>
                                <div class="swiper-slide">Slide 7</div>
                            </div>
                        </div>
                        <div class="swiper-button-prevs">
                            <i class="el-icon-arrow-left"></i>
                        </div>
                        <div class="swiper-button-nexts">
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </div>
            </el-dialog>
            <!-- 应用中心 弹框 -->
            <el-dialog title="ppt" custom-class="mobile-dialog" :visible.sync="appVisible">
                <div class="app-center-content">
                    <div class="app-center-head">
                        <span>应用中心</span>
                        <img src="./img/menu/fh.png" alt="" @click="appVisible = false"></img>
                    </div>
                    <div class="app-center-main">
                        <app-center></app-center>
                    </div>
                    <img src="./img/menu/dbx.png" alt="">
                </div>
            </el-dialog>
        </div>
    `,
    data() {
        return {
            // 头部日期索引
            weekData: ["日", "一", "二", "三", "四", "五", "六"],
            // 头部时间
            date: new Date(),
            // 头部时间循环实例
            setIntervalExample: null,
            // 右侧菜单列表
            rightMenuList: [
                { icon: "./img/index/ppt.png", fun: this.pptFun },
                { icon: "./img/index/ysicon1.png", fun: this.mobileFun },
                { icon: "./img/index/ysicon2.png", fun: this.applicationFun },
                { icon: "./img/index/ysicon3.png", dropdown: true },
            ],
            // 手机弹框显示隐藏
            mobileVisible: false,
            // ppt 弹框显示隐藏
            pptVisible: false,
            // ppt轮播实例
            pptSwiper: null,
            // 应用中心弹框显示隐藏
            appVisible: false
        }
    },
    computed: {
        // 头部日期
        headDate() {
            let arr = [];
            arr[0] = tpUtils.parseTime(this.date, "{y}-{m}-{d}");
            arr[1] = this.weekData[this.date.getDay()];
            arr[2] = tpUtils.parseTime(this.date, "{h}:{i}:{s}");
            return arr;
        },
    },
    methods: {
        /**
         * 菜单 ppt 点击
         */
        pptFun() {
            this.pptVisible = true;
            if (this.pptSwiper) {
                this.pptSwiper.destroy(false);
                this.pptSwiper = null;
            }
            this.$nextTick(() => {
                this.pptSwiper = new Swiper(".mySwiper", {
                    navigation: {
                        nextEl: ".swiper-button-nexts",
                        prevEl: ".swiper-button-prevs",
                    },
                });
            })
        },
        /**
         * 手机点击
         */
        mobileFun() {
            this.mobileVisible = true;
        },
        /**
         * 应用中心点击
         */
        applicationFun() {
            this.appVisible = true;
        },
        /**
         * 下拉菜单
         * @param {*} type  edit 修改  logout 退出
         */
        handleCommand(type) {
            if (type == "edit") {

            } else if (type == "logout") {
                this.$confirm('确认退出登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                }).catch(() => {
                });
            }
        }
    },
    mounted() {
        // 动态更新  data  中的 时间  以此来更新 计算属性的时间
        this.setIntervalExample = setInterval(() => {
            this.date = new Date();
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(this.setIntervalExample);
    },
});

/**
 * 应用中心
 */
Vue.component('app-center', {
    template: `
        <div class="app-center-main-box">
            <div class="app-center-main-top">
                <img src="./img/menu/wdsc.png" alt="">
                <div class="collection-list-box">
                    <div class="swiper myAppSwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in collectionList" :key="index + 'coll'">
                                <img :src="item.icon" alt="">
                                <p>{{item.name}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="app-center-memu-type">
                <div class="app-center-memu-type-item" :class="menuTypeValue == item.value ? 'active': ''" v-for="(item,index) in menuTypeList" :key="index + 'menutype'" @click="menuTypeValue = item.value">{{item.name}}</div>
            </div>
            <div class="app-center-menu-list">
                <div class="app-center-menu-list-item" v-for="(item,index) in allMenuList" :key="index + 'allmenu'">
                    <img :src="item.icon" alt="">
                    <p>{{item.name}}</p>
                    <img class="collection-icon" src="./img/menu/ysc-0.png" alt="">
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 收藏轮播实例
            collectionSwiper: null,
            // 收藏列表
            collectionList: [
                { icon: "./img/menu/xtmc-001.png", name: "高标准农田数字化管理平台" },
                { icon: "./img/menu/xtmc-002.png", name: "农村人居环境管理平台" },
                { icon: "./img/menu/xtmc-003.png", name: "大田生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
            ],
            // 菜单类型列表
            menuTypeList: [
                { name: "全部", value: 0 },
                { name: "粮食生产", value: 1 },
                { name: "产业发展", value: 2 },
                { name: "乡村和美", value: 3 },
            ],
            // 菜单类型选中
            menuTypeValue: 0,
            // 总裁单列表
            allMenuList: [
                { icon: "./img/menu/xtmc-001.png", name: "高标准农田数字化管理平台" },
                { icon: "./img/menu/xtmc-002.png", name: "农村人居环境管理平台" },
                { icon: "./img/menu/xtmc-003.png", name: "大田生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-001.png", name: "高标准农田数字化管理平台" },
                { icon: "./img/menu/xtmc-002.png", name: "农村人居环境管理平台" },
                { icon: "./img/menu/xtmc-003.png", name: "大田生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-001.png", name: "高标准农田数字化管理平台" },
                { icon: "./img/menu/xtmc-002.png", name: "农村人居环境管理平台" },
                { icon: "./img/menu/xtmc-003.png", name: "大田生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
                { icon: "./img/menu/xtmc-004.png", name: "水产生产管理平台" },
            ]
        }
    },
    methods: {
        /**
         * 初始化收藏列表轮播
         */
        initCollectionSwiper() {
            if (this.collectionSwiper) {
                this.collectionSwiper.destroy(false);
                this.collectionSwiper = null;
            }
            this.collectionSwiper = new Swiper(".myAppSwiper", {
                slidesPerView: "auto",
                spaceBetween: 15,
            });
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initCollectionSwiper();
        })
    }
});

/**
 * echarts 地图
 */
Vue.component('echarts-map', {
    template: `
        <div class="echarts-map-box">
            <div id="echarts-map"></div>
            <div class="map-legend">
                <div class="map-legend-item">
                    <el-checkbox v-model="checked">
                        <img src="./img/index/icon2.png">
                        <span>黑龙江民居省级试点村</span>
                    </el-checkbox>
                </div>
                <div class="map-legend-item">
                    <el-checkbox v-model="checked1">
                        <img src="./img/index/icon1.png">
                        <span>菜园革命示范村</span>
                    </el-checkbox>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            // 地图图例选中
            checked: true,
            checked1: true,
            mapData: [
                {
                    lonlat: [127.9446977778367, 49.41088271289729],
                    name: "测试",
                    type: 1,
                    active: false,
                    show: true
                },
                {
                    lonlat: [128.9906374804790,49.22028181979759],
                    name: "测试2",
                    type: 2,
                    active: false,
                    show: true
                }
            ],
            mapEcharts: null
        }
    },
    watch: {
        checked(val) {
            this.mapData.map(item => {
                if (item.type == 2) {
                    item.show = val;
                }
            })
            this.mapPointerClick();
        },
        checked1(val) {
            this.mapData.map(item => {
                if (item.type == 1) {
                    item.show = val;
                }
            });
            this.mapPointerClick();
        }
    },
    methods: {
        /**
         * 初始化地图
         */
        initMap() {
            let _this = this;
            let mapData = this.mapData.filter(item => {
                return item.show
            });
            let scatterData = mapData.map(item => {
                return {
                    name: item.name,
                    value: item.lonlat,
                    symbol: `image://./img/index/icon${item.type}${item.active ? '-0' : ''}.png`,
                    symbolSize: item.active ? [100,60] : [40, 55]
                }
            })
            let myCharts = echarts.init(document.getElementById("echarts-map"));
            echarts.registerMap('xkx', this.xkxGetJson);
            echarts.registerMap('xkx2', this.xkxGetJson2);
            let option = {
                geo: {
                    map: "xkx2",
                    type: "map",
                    roam: false,
                    zoom: 1.2,
                    itemStyle: {
                        areaColor: "rgba(1, 138, 243,0.6)",
                        borderColor: "rgba(199,231,244, 1)",
                        borderWidth: 2,
                        shadowColor: "rgba(1, 138, 243, 1)",
                        shadowOffsetX: 7,
                        shadowOffsetY: 10
                    },
                    emphasis: {
                        disabled: true
                    }
                },
                series: [{
                    type: "map",
                    name: "区域名称",
                    map: 'xkx',
                    zoom: 1.2,
                    itemStyle: {
                        areaColor: "rgba(0, 24, 43, 0.3)",
                        borderColor: "rgba(177, 227, 247,1)",
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        color: "#ffffff",
                        fontSize: 12,
                        formatter: (param) => {
                            if (param.name) {
                                return `{a|${param.name}}`
                            }
                        },
                        rich: {
                            a: {
                                fontFamily: "SourceHanSansCNRegular",
                                fontSize: 15,
                            }
                        }
                        
                    },
                    silent: true,
                }, {
                    type: "scatter",
                    coordinateSystem: 'geo',
                    emphasis: {
                        scale: 1.2
                    },
                    itemStyle: {
                        opacity: 1
                    },
                    data: scatterData
                }],
            };
            myCharts.setOption(option, true);
            this.mapEcharts = myCharts;
            myCharts.on("click", function (params) {
                _this.$emit("mappointclick", params);
                if (params.componentSubType == "scatter") { 
                    let data = params.data;
                    this.mapData.map(item => {
                        if (item.name == data.name) {
                            item.active = true;
                        } else {
                            item.active = false;
                        }
                    })
                    _this.mapPointerClick(params);
                }
            })
            window.addEventListener("resize", () => {
                myCharts.resize()
            });
        },
        mapPointerClick() {
            let mapData = this.mapData.filter(item => {
                return item.show
            });
            let scatterData2 = mapData.map(item => {
                return {
                    name: item.name,
                    value: item.lonlat,
                    symbol: `image://./img/index/icon${item.type}${item.active ? '-0' : ''}.png`,
                    symbolSize: item.active ? [100,60] : [40, 55]
                }
            })
            this.mapEcharts.setOption({
                series: [{
                    type: "map",
                }, {
                    type: "scatter",
                    data: scatterData2
                }]
            });
        },
        /**
         * 获取地图数据
         */
        getMapData() {
            axios.get("./xkx.json").then(res => {
                this.xkxGetJson = res.data;
                axios.get("./xkx-big.json").then(res2 => {
                    this.xkxGetJson2 = res2.data;
                    this.initMap();
                })
            })
        }
    },
    mounted() {
        this.getMapData();
    }
});